<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    </style>
</head>

<body>
    <div id="app">
        <p>str:{{str}}</p>
        <p>翻转后的str：{{reverseStr}}</p>
        <p>翻转后的str：{{reverseStr}}</p>
        <p>翻转后的str：{{reverseStr}}</p>
        <p>翻转后的str：{{reverseStrfn()}}</p>
        <p>翻转后的str：{{reverseStrfn()}}</p>
        <p>翻转后的str：{{reverseStrfn()}}</p>
        <input type="button" value="修改str" @click="changeStr">
        <hr>
        <p>firstName：{{firstName}}</p>
        <p>lastName：{{lastName}}</p>
        <p>fullName：{{fullName}}</p>
        <input type="button" value="修改fullName" @click="changeFullName">
    </div>
</body>

</html>
<script src="./js/vue2.js"></script>
<script>

    let vm = new Vue({
        el: "#app",
        data: {
            str: "hello vue",
            firstName:"勇凡",
            lastName:"刘"
        },
        methods: {
            reverseStrfn: function () {
                console.log("函数");
                return this.str.split("").reverse().join("");
            },
            changeStr(){
                this.str +="1";
            },
            changeFullName(){
                this.fullName = "刘·勇凡斯基";
            }
        },
        // 定义计算属性
        computed: {
            reverseStr: function () {
                console.log("计算属性");
                // 该计算属性依赖着str。如果str不变化，那么，就不会调用该函数。
                return this.str.split("").reverse().join("");
            },
            fullName:{
                set:function(newVal){
                    this.firstName = newVal.split("·")[1];
                    this.lastName = newVal.split("·")[0];
                },
                get:function(){
                    return this.lastName+"·"+this.firstName
                }
            }

        }
    });



</script>